<script setup>
import { onMounted, ref, watch } from 'vue'
import { renderCPULine } from '@/assets/js/chartUtils'
const props = defineProps({
    dataYValue: {
        type: Array,
        default: () => {
            return []
        },
    },
    dataXValue: {
        type: Array,
        default: () => {
            return []
        },
    },
    GPUValue: {
        type: Array,
        default: () => {
            return []
        },
    },
    memoryValue: {
        type: Array,
        default: () => {
            return []
        },
    },
})
const chartElem = ref(null)
watch(props.dataXValue, () => {
    getAlarmData()
})
function getAlarmData() {
    renderCPULine(
        chartElem.value,
        [
            {
                name: 'CPU利用率',
                valueList: props.dataYValue,
            },
            {
                name: '系统内存利用率',
                valueList: props.memoryValue,
                color: '#9FDC82',
                itemColor: ['rgba(159,220,130,0.8)', 'rgba(159,220,130,0.3)'],
            },
            {
                name: 'GPU利用率',
                valueList: props.GPUValue,
                color: '#B915CB',
                itemColor: ['rgba(185,21,203,0.8)', 'rgba(185,21,203,0.3)'],
            },
        ],
        {
            xData: props.dataXValue,
        }
    )
}
onMounted(() => {
    getAlarmData()
})
</script>
<template>
    <div ref="chartElem" class="chart-wrap"></div>
</template>
<style lang="scss" scoped>
.chart-wrap {
    height: 600px;
}
.main {
    width: 100%;
    height: 500px;
}
</style>
